<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta name="robots" content="noindex, nofollow">
		<meta name="googlebot" content="noindex, nofollow">

		<script type="text/javascript" src="jquery.js"></script>

		<script type="text/javascript" src="jquery-ui.min.js"></script>


		<style type="text/css">

		</style>

		<title> by pmw57</title>

		<script type='text/javascript'>
			//<![CDATA[
			$(window).load(function() {
				var fixHelperModified = function(e, tr) {
						var $originals = tr.children();
						var $helper = tr.clone();
						$helper.children().each(function(index) {
							$(this).width($originals.eq(index).width())
						});
						return $helper;
					},
					updateIndex = function(e, ui) {
						$('td.index', ui.item.parent()).each(function(i) {
							$(this).html(i + 1);
						});
					};

				$("#sort tbody").sortable({
					helper: fixHelperModified,
					stop: updateIndex
				}).disableSelection();
			}); //]]>
		</script>

	</head>

	<body>
		<h1>Sorting A Table With jQuery UI</h1>
		<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable with jQuery UI</a>

		<table id="sort" class="grid" title="Kurt Vonnegut novels">
			<thead>
				<tr>
					<th class="index">No.</th>
					<th>Year</th>
					<th>Title</th>
					<th>Grade</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="index">1</td>
					<td>1969</td>
					<td>Slaughterhouse-Five</td>
					<td>A+</td>
				</tr>
				<tr>
					<td class="index">2</td>
					<td>1952</td>
					<td>Player Piano</td>
					<td>B</td>
				</tr>
				<tr>
					<td class="index">3</td>
					<td>1963</td>
					<td>Cat's Cradle</td>
					<td>A+</td>
				</tr>
				<tr>
					<td class="index">4</td>
					<td>1973</td>
					<td>Breakfast of Champions</td>
					<td>C</td>
				</tr>
				<tr>
					<td class="index">5</td>
					<td>1965</td>
					<td>God Bless You, Mr. Rosewater</td>
					<td>A</td>
				</tr>
			</tbody>
		</table>

		<script>
			// tell the embed parent frame the height of the content
			if(window.parent && window.parent.parent) {
				window.parent.parent.postMessage(["resultsFrame", {
					height: document.body.getBoundingClientRect().height,
					slug: "tzYbU"
				}], "*")
			}
		</script>

	</body>

</html>